<template>
    <div class="layout">
        <Layout :style="{ height: '100vh' }">
            <Sider breakpoint="md" :collapsed-width="78" v-model="isCollapsed" :style="{ zIndex: '900' }">
                <div class="logo-img">
                    <a href="/#/index/index"><img src="/statics/console/img/logo.png" alt=""></a>
                </div>
                <Menu ref="side_menu" width="auto" :class="menuitemClasses" accordion :active-name="activeName"
                    :open-names="[openNames]">
                    <!-- 一级分类 -->
                    <div :name="one.url" theme="light" v-for="one in menuData" :key="one.id">
                        <div class="left_one">
                            <Icon type="ios-more" />
                            {{ one.name }}
                        </div>
                        <!-- 二级分类 -->
                        <Submenu :name="two.url" theme="light" v-for="two in one.children" :key="two.id">
                            <template #title>
                                <Icon :type="two.icon" />
                                {{ two.name }}
                            </template>
                            <!-- 三级分类 -->
                            <MenuItem :name="there.url" v-for="there in two.children" :key="there.id"
                                :to="'/' + there.url">{{ there.name }}
                            <Icon type="ios-arrow-round-forward" :style="{ float: 'left' }" />
                            </MenuItem>
                        </Submenu>
                    </div>
                </Menu>
                <!-- 退出 -->
                <!-- <div class="left_two" @click="handleDropDownClick('logout')">
            	<Icon type="ios-arrow-dropright" style="margin-right:10px" />退出登录
            </div> -->
            </Sider>
            <Layout>
                <Header class="layout-header-bar">
                    <Breadcrumb separator=">" class="f-l">
                        <BreadcrumbItem v-for="item in breadCrumbList" to="" :key="item.id">{{ item.name }}
                        </BreadcrumbItem>
                    </Breadcrumb>
                    <div class="header-right">
                        <Avatar src="/statics/console/img/header.jpg" />
                        <Dropdown trigger="click">
                            <a href="javascript:void(0)">
                                <span class="header-nickname">{{ username }}</span>
                                <Icon type="ios-arrow-down" style="margin-left:5px"></Icon>
                            </a>
                            <template #list>
                                <DropdownMenu>
                                    <DropdownItem @click="editInfo()">个人信息</DropdownItem>
                                    <DropdownItem @click="editPwd()">修改密码</DropdownItem>
                                    <DropdownItem @click="logout('logout')">退出登录</DropdownItem>
                                </DropdownMenu>
                            </template>
                        </Dropdown>
                    </div>
                </Header>
                <!-- 标题 + 按钮组 -->
                <div class="right_top_bg clearfix">
                    <div class="right_top clearfix">
                        <!-- <h4 class="f-l right-titles">{{ title }}</h4> -->
                    </div>
                </div>
                <Content :style="{ padding: '15px', background: '#fff' }">
                    <router-view></router-view>
                </Content>
                <Footer class="layout-footer-center">2022-2099 &copy; 李志刚（854378082@qq.com）</Footer>
            </Layout>
        </Layout>
    </div>
</template>
<script>
import router from '.././router/router'
import { LOGOUT } from '.././store/mutation_types'
export default {
    data() {
        return {
            openNames: '',
            activeName: '',
            isCollapsed: false, // 侧栏开关
            menuData: [], // 左侧菜单
            breadCrumbList: [], // 面包屑
            title: '首页', // 标题
        };
    },
    computed: {
        // 登录状态
        username() {
            return this.$store.getters.user_id != 0 ? this.$store.getters.user_name : '未登陆'
        },
        menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    watch: {
        openNames() {
            this.$nextTick(() => {
                this.$refs.side_menu.updateOpened();
                this.$refs.side_menu.updateActiveName();
            })
        }
    },
    created() {
        this.getMenuData();
        // 初始化面包屑及标题+按钮组
        var params = { 'url': this.$route.path };
        this.$api.menu.breadcrumb(params).then(res => {
            this.breadCrumbList = res.result;
        });
        // 路由结束后更新面包屑及标题+按钮组
        router.afterEach((to, from) => {
            var params = { 'url': to.path };
            // 这里是个大坑，不判断登录页面会在退出时让登录页面进入死循环，全局的钩子还是要少加为好
            if (to.name !== 'login') {
                this.$api.menu.breadcrumb(params).then(res => {
                    this.breadCrumbList = res.result;
                });
            }
        })
    },
    methods: {
        logout(name) {
            if (name == 'logout') {
                this.$store.commit(LOGOUT)
                // 跳转到登录
                router.push('/');
            }
        },
        editInfo() {
            router.push('/admin/selfinfo');
        },
        editPwd() {
            router.push('/admin/selfpassword');
        },
        getMenuData() {
            var self = this
            this.$api.menu.left().then(res => {
                if (res.code == 200) {
                    self.menuData = res.result
                    // 在这里更新要打开的左侧菜单
                    let objTmp = res.result;
                    let arr1 = [];
                    Object.keys(objTmp).forEach(v => {
                        let tmp = {'id':objTmp[v].id,'parentid':objTmp[v].parentId,'label':objTmp[v].url};
                        arr1.push(tmp);
                        let objTmpSub = objTmp[v].children;
                        // 子菜单
                        Object.keys(objTmpSub).forEach(s => {
                            let tmp = { 'id': objTmpSub[s].id, 'parentid': objTmpSub[s].parentId, 'label': objTmpSub[s].url };
                            arr1.push(tmp);
                            // 第三层
                            let objTmpThere = objTmpSub[s].children;
                            Object.keys(objTmpThere).forEach(t => {
                                let tmp = { 'id': objTmpThere[t].id, 'parentid': objTmpThere[t].parentId, 'label': objTmpThere[t].url };
                                arr1.push(tmp);
                            })
                        })
                    });
                    let tmppath = this.$route.path;
                    // .replace('/','-')
                    tmppath = tmppath.substr(1);
                    let obj = arr1.find(o => o.label == tmppath);
                    if (obj != undefined) {
                        let obj2 = arr1.find(o => o.id == obj.parentid);
                        this.openNames = obj2.label;
                        this.activeName = obj.label;
                    }
                }
            });
        }
    }
}
</script>
